<template>
  <page-meta>
    <navigation-bar
      title="问答详情" 
      background-color="#5896f5"
    />
  </page-meta>
  
  <view class="content">
    <view @click="$refs.pushCommentBar.cancelInput()">
      <view class="head_view">
        <image class="image_head" :src="data.avatarUrl" />
        <view class="text_view">
          <view>
            <text class="text_name">{{ data.nickName }}</text>
          </view>
          <view>
            <text class="text_time">{{ datetimeComputed }}</text>
          </view>
        </view>
      </view>
      <view class="content_view">
        <view class="content_head">
          <text class="text_title">问题描述</text>
          <image class="icon_award" src="../../static/myself/money.png" />
          <text class="text_award">{{ data.award }}</text>
        </view>
        <view class="content_content">
          <view style="font-size: 15px;font-weight: bold;padding-bottom: 10px;">{{ data.title }}</view>
          <view style="height: 1px;width: 100%;background-color: #ddd;margin-bottom: 10px;" />
          <rich-text class="rich_text" :nodes="data.content" />
        </view>
      </view>
      <!-- 广告位 -->
      <ad-bar />
      <!-- 评论区 -->
      <view class="comment_view">
        <text class="text_commentNumber">评论 {{ commentNumber }}</text>
        <view style="margin-top: 20px;" />
        <comment-bar
          v-for="item in answersList"
          :key="item.aid"
          :data="item"
        />
      </view>
    </view>
    <view style="margin-top: 20px;" />
    <!-- 底部状态栏 -->
    <text-toast-bar
      text-null="暂无回答"
      :is-null="commentNumber === 0"
      :load-more="start !== commentNumber"
      :no-more="start === commentNumber"
    />
    <view style="margin-bottom: 40px;" />
    <!-- 评论栏 -->
    <push-comment-bar ref="pushCommentBar" :need-login="true" @send="send" />
  </view>
</template>

<script>
import commentBar from './module/commentBar.vue'
import pushCommentBar from '@/components/pushCommentBar.vue'
import textToastBar from '@/components/textToastBar.vue'
import adBar from '@/components/adBar.vue'

import { getQuestion } from '@/common/api/question.js'
import { formatDate } from '@/common/util.js'
import { getAnswerNum, getAnswersBetween, pushAnswer } from '@/common/api/answer.js'
export default {
  components: {
    commentBar,
    pushCommentBar,
    textToastBar,
    adBar
  },
  data() {
    return {
      data: {
        avatarUrl: '',
        datetime: 0,
        nickName: '提问者',
        award: 9999
      },
      qid: 0,
      answersList: [],
      commentNumber: 0,
      start: 0
    }
  },
  computed: {
    datetimeComputed: function() {
      return formatDate(this.data.datetime * 1000)
    }
  },
  onReachBottom() {
    this.getMore(this.qid)
  },
  onLoad: function(res) {
    // 获取传过来的问题id 并且搜索
    if (typeof (res.qid) !== 'undefined') {
      this.qid = res.qid
      getQuestion(this.qid)
        .then(data => {
          this.data = data
        })
        .catch(err => {
          uni.redirectTo({
            url: '/pages/index/index'
          })
        })
		
      getAnswerNum(this.qid)
        .then(num => {
          this.commentNumber = num
          this.getMore(this.qid)
        })
    } else {
      uni.redirectTo({
        url: '/pages/index/index'
      })
    }
  },
  methods: {
    // 发送评论
    send(value) {
      if (value.length !== 0) {
        var o = new Object()
        o.qid = this.qid
        o.content = value
        o.uid = this.$store.state.user.userInfo.uid
        pushAnswer(o)
          .then(res => {
            res.avatarUrl = this.$store.state.user.userInfo.avatarUrl
            res.nickName = this.$store.state.user.userInfo.nickName
            this.answersList.unshift(res)
            this.commentNumber++
            this.start++
            this.$refs.pushCommentBar.clearValue()
            this.$refs.pushCommentBar.cancelInput()
            uni.showToast({
              title: '评论成功！'
            })
          })
      }
      return false
    },	
    // 获取更多评论
    getMore(qid) {
      if (this.start !== this.commentNumber) {
        getAnswersBetween(qid, this.start, this.start + 10)
          .then(datalist => {
            this.answersList = [...this.answersList, ...datalist]
            this.start = (this.start + 10) >= this.commentNumber ? this.commentNumber : this.start + 10
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.content{
		padding: 15px;
		height: 100%;
		overflow: hidden;
		.head_view{
			height: 70px;
			.image_head{
				margin-top: 10px;
				height: 50px;
				width: 50px;
				border-radius: 50px;
				float: left;
			}
			.text_view{
				padding-top: 15px;
				margin-left: 60px;
				.text_time{
					font-size: 12px;
					color: gray;
				}
			}
		}
		
		.content_view{
			.content_head{
				height: 25px;
				position: relative;
				.text_title{
					position: absolute;
					font-size: 12px;
					color: darkgray;
					bottom: 0%;
					left: 0;
				}
				.icon_award{
					float: right;
					height: 24px;
					width: 24px;
				}
				.text_award{
					float: right;
					letter-spacing: 1px;
					font-size: 18px;
					color: royalblue;
				}
			}
			.content_content{
				min-height: 200px;
				margin-top: 15px;
				margin-bottom: 15px;
				.rich_text{
					font-size: 12px;
				}
			}
		}
	
		.comment_view{
			.text_commentNumber{
				font-size: 12px;
				font-weight: bold;
			}
		}
	}
</style>
